<template>
	<view>
		<view class="topBox">
			<view :style="{height: (navigationBarHeight + statusBarHeight) + 'px'}"></view>
			<view class="header" @click="GoLogin()">
				<image class="left"
					:src="token ? 'https://img.wilmer.com.cn/admin/2024/3-20/222.jpg':'https://img.wilmer.com.cn/admin/2024/3-20/111.jpg'"
					mode=""></image>
				<view class="right">
					<view class="one">{{phonenumber?PhoneToName(phonenumber):'登录/注册'}}</view>
					<view class="two">{{phonenumber?'欢迎登录小默留学':'点击登录获取更多信息'}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="Joinus">
			<view class="left">
				<image class="icon" src="https://img.wilmer.com.cn/WechatIMG284.jpg" mode=""></image>
				<view class="version">
					<view class="one">快速入驻小默</view>
					<view class="two">平台送生 拿院校高返佣</view>
				</view>
			</view>
			<view class="right conter">立即入驻<u-icon name="arrow-right" color="#03AD88"></u-icon>
			</view>
		</view> -->
		<!-- 新 -->
		<view class="icony">
			<view class="left" @click="toConcerning">
				<button class="btn">
					<view class="icon-left">
						<img src="https://img.wilmer.com.cn/admin/2024/3-20/guanyu.png" alt="" />
					</view>
					<text>关于我们</text>
				</button>
			</view>
			<view class="right">
				<button open-type="contact" @contact='Getcontact' class="btn">
					<view class="icon-right">
						<img src="https://img.wilmer.com.cn/admin/2024/3-20/kefu.png" alt="" />
					</view>
					<text>在线客服</text>
				</button>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="hr"></view>
		<!-- 我的订单 -->
		<view class="orders">
			<view class="tit">
				<text>我的订单</text>
			</view>
			<view class="list">
				<view class="list-one" v-for="(item,index) in list" :key="idnex">
					<image class="left" src="https://img.wilmer.com.cn/admin/2024/3-19/3.jpg" mode=""></image>
					<view class="right">
						<view style="display: flex;flex-direction: column;">
							<view class="txt-three">订单编号：{{item.ordeNum}}</view>
							<view class="txt-four">创建时间：{{item.createTime}}</view>
						</view>
						<!-- <view class="detail">详情 ></view> -->
					</view>
				</view>
				<image v-if="list.length == 0" class="NoData"
					src="https://img.wilmer.com.cn/admin/2024/3-20/WechatIMG19.jpg" mode=""></image>
			</view>
		</view>

		<!-- 测试微信支付注释掉即可 -->
		<!-- <u-button type="success" @click="pay">支付</u-button> -->
	</view>
</template>

<script>
	import {
		UserTokenKey
	} from '../../static/libs/config.js'
	import {
		Getprofile,
		GetPayAi,
		orderList
	} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度
				token: '',
				phonenumber: "", // 默认用户登陆的手机号
				payForm: {},
				list: []
			}
		},
		onShow() {
			this.token = uni.getStorageSync(UserTokenKey)
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			Getprofile().then(res => {
				if (res.data.code == 200) {
					this.phonenumber = res.data.data.phonenumber
				}
			})
			orderList().then(res => {
				console.log(res, 'shuuj')
				this.list = res.data.rows
			})
		},
		methods: {
			Getcontact(e) { // 微信在线客服
				console.log(e, 'shujushjj')
			},
			GoLogin() { // 去登陆
				if (this.token == undefined || this.token == '' || this.token == null) {
					uni.navigateTo({
						url: '/pages/Login/Login-shortcut'
					})
				}
			},
			toConcerning() { // 关于我们
				uni.navigateTo({
					url: '/pages/my-set/concerning'
				})
			},
			PhoneToName(originalNumber) { // 手机号
				const originalStr = originalNumber.toString();
				const modifiedStr = originalStr.substring(0, 3) + '****' + originalStr.substring(originalStr.length - 4);
				return modifiedStr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBox {
		width: 100vw;
		height: 480rpx;
		background: linear-gradient(270.26deg, #E8FCE3 0.21%, #DAFFEE 50.5%, #D4FFF5 99.79%);

		.header {
			margin-top: 28rpx;
			display: flex;
			align-items: center;
			margin-left: 56rpx;

			.left {
				width: 160rpx;
				height: 160rpx;
			}

			.right {
				margin-left: 24rpx;

				.one {
					font-family: PingFang SC;
					font-size: 40rpx;
					font-weight: 500;
					color: #333333;
				}

				.two {
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}

	.Joinus {
		width: 100vw;
		height: 152rpx;
		background: url('https://img.wilmer.com.cn/WechatIMG283.jpg') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: -100rpx;

		.left {
			margin-left: 60rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 60rpx;
				height: 60rpx;
				margin-right: 16rpx;
			}

			.version {
				color: #FFFFFF;

				.one {
					font-family: PingFang SC;
					font-size: 40rpx;
					font-weight: 500;
				}

				.two {
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}

		.right {
			margin-right: 38rpx;
			width: 200rpx;
			height: 68rpx;
			border-radius: 68rpx;
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: 500;
			background-color: #ffffff;
			color: #03AD88;
		}
	}

	.icony {
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx 0;
		text-align: center;
		margin-top: -80rpx;
		background: #ffffff;
		box-shadow: 0px 1px 6px 2px #0000001A;

		.left {
			text-align: center;
			display: inline-block;
			margin-right: 122rpx;

			.icon-left {
				margin: auto;
				width: 76rpx;
				height: 76rpx;
				border: 3px solid #00d000;
				border-radius: 50%;
				margin-bottom: 12rpx;

				img {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.right {
			text-align: center;
			display: inline-block;

			.icon-right {
				margin: auto;
				width: 76rpx;
				height: 76rpx;
				border: 3px solid #00d000;
				border-radius: 50%;
				margin-bottom: 12rpx;

				img {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
	}

	::v-deep .icony .btn {
		background-color: rgba(0, 0, 0, 0);
	}

	::v-deep .icony .btn:after {
		border: none;
	}

	.hr {
		width: 100%;
		height: 6px;
		background-color: #f8f8f8;
	}

	.orders {
		padding-top: 32rpx;

		.tit {
			margin-left: 42rpx;
			display: flex;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 40rpx;

			img {
				width: 50rpx;
				margin-right: 8rpx;
			}
		}
	}

	.list {
		.list-one {
			width: 100vw;
			height: 154rpx;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			align-content: center;
			border-bottom: 1px solid #F8F8F8;

			.left {
				width: 44rpx;
				height: 48rpx;
				margin-left: 60rpx;
				margin-right: 46rpx;
			}

			.right {
				display: flex;
				align-items: center;
				margin-right: 46rpx;

				.txt-three {
					font-family: PingFang SC;
					font-size: 32rpx;
					font-weight: 400;
					color: #666666;
				}

				.txt-four {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 12rpx;
				}

				.detail {
					color: #00d000;
					font-size: 28rpx;
					margin-left: 40rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}
		}
	}

	.NoData {
		display: block;
		width: 400rpx;
		height: 318rpx;
		margin: 40rpx auto 0;
	}
</style>